<template>
  <q-page class="cc-admin row">
    <div class="col bg-white shadow-2 q-pa-md q-ma-sm">
      <q-table
        flat
        color="primary"
        class="cross_table"
        separator="cell"
        :columns="columns"
        :data="list"
        row-key="id"
        :pagination.sync="pagination"
        :visible-columns="group"
        @request="query"
        :rows-per-page-options="[10,20,50,100]"
        :loading="loading"
      >
        <template v-slot:top>
          <div class="row no-wrap full-width">
            <!--<q-input clearable outlined dense placeholder="请输入关键字搜索" class="on-left"
              @input="query" debounce="500" v-model="key" >
              <template #append>
                <q-btn flat round icon="search" color="primary" @click="query" :loading="loading">
                  <q-tooltip>搜索</q-tooltip>
                </q-btn>
              </template>
            </q-input>
            <q-space />-->
            <div class="q-pa-sm">
              <q-select label="选择时间期限" clearable outlined dense v-model="date_model" :options="search_list_date" :options-dense="true"  @input="onGroupValueChange" style="width:200px;">
                <template v-slot:prepend>
                  <q-icon name="today" @click.stop.prevent />
                </template>
              </q-select>
            </div>
            <div class="q-pa-sm">
              <q-input clearable dense outlined placeholder="收货人姓名" v-model="name" style="width: 200px;">
                <template v-slot:prepend>
                  <q-icon name="mdi-account" @click.stop.prevent />
                </template>
                <template #append>
                  <q-btn flat round icon="search" color="primary" @click="search" :loading="loading">
                    <q-tooltip>搜索</q-tooltip>
                  </q-btn>
                </template>
              </q-input>
            </div>
            <div class="q-pa-sm">
              <q-input clearable dense outlined placeholder="收货人手机号码" v-model="mobile" style="width: 230px;">
                <template v-slot:prepend>
                  <q-icon name="phone" @click.stop.prevent />
                </template>
                <template #append>
                  <q-btn flat round icon="search" color="primary" @click="search" :loading="loading">
                    <q-tooltip>搜索</q-tooltip>
                  </q-btn>
                </template>
              </q-input>
            </div>
            <div class="q-pa-sm">
              <q-input clearable dense outlined placeholder="订单编号" v-model="order_no">
                <template v-slot:prepend>
                  <q-icon name="style" @click.stop.prevent />
                </template>
                <template #append>
                  <q-btn flat round icon="search" color="primary" @click="search" :loading="loading">
                    <q-tooltip>搜索</q-tooltip>
                  </q-btn>
                </template>
              </q-input>
            </div>
            <div class="q-pa-sm">
              <q-btn icon="search" size="md" no-wrap color="blue" label="查询" @click="search" />
              <!--<q-btn icon="add" no-wrap color="primary" label="新建" @click="add" />
              <q-btn icon="mdi-home" no-wrap color="primary" label="返回服务商列表" @click="go_back" />-->
            </div>
            <div class="q-pa-sm">
              <q-btn icon="mdi-restore" no-wrap color="grey" label="刷新列表" @click="refresh" />
            </div>
          </div>
        </template>
        <template #body-cell-status="props">
          <q-td  key="status" :props="props">{{getGoodsLabel(props.row.status) }}</q-td>
        </template>

        <template #body-cell-opt="props">
          <q-td :props="props" :auto-width="true">
            <q-btn flat round dense color="primary" icon="edit" @click="edit2(props.row,'goods')">
              <q-tooltip>编辑</q-tooltip>
            </q-btn>
            <btn-del label="商品管理" @confirm="del(props.row)" />
          </q-td>
        </template>
      </q-table>
    </div>
    <confirm ref="confirmDialog" :msg="confirmMsg" @confirm="deleteBatch()" />
  </q-page>
</template>

<script>
import { IndexMixin } from 'boot/mixins';
import { getDictLabel } from 'boot/dictionary';
import confirm from 'components/confirm';
import { requiredTest } from 'boot/inputTest';
import catalogselect from 'components/catalogselect';
import viewcatalog from 'components/viewcatalog';
import { date } from 'quasar';
import { ref } from 'vue';

export default {
  name: 'MntDeploy',
  mixins: [IndexMixin],
  components: {
    confirm,
    catalogselect,
  },
  data() {
    return {
      date_show: '',
      proxyDate: '',
      proxyEndDate:'',
      query_type: '',
      oid: '',
      name: '',
      mobile: '',
      form: {
        id:'',
        goods_no:'',
        seller_price:'',
        model_id:'',
        ad_img: '',
        name:'',
        is_share: 0,
        active_id: 0,
        type: 'default',
        is_delivery_fee: 0,
        sort: '99',
        grade: 0,
        brand_id: '0',
        unit: '0',
        point: '0',
        weight: '0',
      },
      start_time: '',
      end_time: '',
      columns: [
        { name: 'user_id', align: 'center', label: 'DID', field: 'user_id', },
        { name: 'true_name', align: 'center', label: '姓名', field: 'true_name', },
        { name: 'mobile', align: 'center', label: '收货人电话号码', field: 'mobile', },
        { name: 'order_no', align: 'center', label: '订单号', field: 'order_no', },
        { name: 'amount', align: 'center', label: '金额', field: 'amount', },
        { name: 'true_name', align: 'center', label: '姓名', field: 'true_name', },
        { name: 'note', align: 'center', label: '备注', field: 'note', },
        // { name: 'amount3', align: 'center', label: 'amount3', field: 'amount3', },
        // { name: 'amount4', align: 'center', label: 'amount4', field: 'amount4', },
        // { name: 'amount5', align: 'center', label: 'amount5', field: 'amount5', },
        { name: 'time', align: 'center', label: '创建时间', field: 'time', },
      ],
      showQuery: true,
      headers: [{ name: 'Authorization', value: localStorage.Authorization }],
      uploadUrl: `${process.env.BASE_URL}/uploadfile`,
      imgUrl: `http://img.tel.gzzsu.com`,
      url: {
        list: '/siteorderlist',
        deleteBatch: '/client/deleteBatch',
        exportXlsUrl: '/client/exportXls',
        importExcelUrl: '/client/importExcel',
      },
      isEdit: 0,
      modelList: [],
      search_list_date: [
        { label: '本日' , value: 1 },
        { label: '本周' , value: 2 },
        { label: '七天之内' , value: 3 },
        { label: '本月' , value: 4 },
        { label: '30天之内' , value: 5 },
        { label: '三个月之内' , value: 6 },
        { label: '六个月之内' , value: 7 },
        { label: '本年度' , value: 8 },
      ],
      date_model: '',
      date_id: '',
      searchForm: {
        order_no: '',
        query_type: '',
        mobile: '',
        name: '',
      },
      order_no: '',
    };
  },
  methods: {
    search(){
      this.query()
    },
    onGroupValueChange(val) {
      if(val != null && val != '' && val != undefined){
        this.date_model = val
        this.date_id = this.date_model.value
      }
      this.query()
    },
    queryParam() {   //查询前处理参数，使用这个
      if (this.$route.query.id) {
        return  { uid: this.$route.query.id }
      }
      if(this.name && this.name.length > 0){
        this.searchForm.name = this.name
      }else{
        delete this.searchForm.name
      }
      if(this.order_no && this.order_no.length > 0){
        this.searchForm.order_no = this.order_no
      }else{
        delete this.searchForm.order_no
      }
      if(this.mobile && this.mobile.length>0){
        this.searchForm.mobile = this.mobile
      }else{
        delete this.searchForm.mobile
      }
      if(this.date_id && parseInt(this.date_id)>0){
        this.searchForm.query_type = this.date_id
      }else{
        delete this.searchForm.query_type
      }
    },
    go_back(){
      this.$router.push({
        path: '/member/list'
      })
    },
    refresh(){
      this.query()
    },
    requiredTest,

    getGoodsLabel(status){
      const showStatus = ['删除', '正常','正常',  ];
      return showStatus[status]
    },
    onReset(){
      this.form = {
        name : '' ,
        mobile : '',
        telephone : '',
        tag : '',
        remark : '',
      }
    },
  },
  mounted() {
    if (this.$route.query.id) {
      this.user_id = this.$route.query.id
    }
  },
};
</script>

<style lang="stylus"></style>
